<template>
    <div class="syspubnews">
        <!-- <h2>系统新闻发布</h2> -->
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/sysout/sysoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
            <el-breadcrumb-item>发布新闻资讯</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 发布新闻 -->
        <div class="myfrom">
        <el-form :model="newsForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="新闻标题" prop="newsTitle" required>
            <el-input v-model="newsForm.newsTitle"></el-input>
          </el-form-item>
          <!-- <el-tooltip class="item" effect="dark" content="上传一张主要图片" placement="bottom-start">
            <el-form-item label="商品图片" prop="goodsImg" required>
              <el-button type="primary" @click="dialogVisibleImg = true">上传图片</el-button>
              <img v-if="goodsForm.goodsImg" :src="goodsForm.goodsImg" height="100px" style="margin:10px;display:inline-block" alt="">
            </el-form-item>
          </el-tooltip> -->
          <el-form-item label="新闻图片" prop="newsTitle" required>
            <el-button type="primary" @click="getImg">点击获取用户传过来的图片</el-button>
            <img v-if="newsForm.newsImg" :src="newsForm.newsImg" alt="" style="height:100px">
          </el-form-item>
          <el-form-item label="发布时间" required>
            <!-- <el-date-picker type="date" placeholder="选择日期" v-model="goodsForm.subTime" style="width: 30%;"></el-date-picker> -->
             <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">:</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" value-format="HH:mm:ss" v-model="date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
          </el-form-item>
          <!-- 富文本编辑//官网https://www.wangeditor.com/doc/
            使用：
            1、安装npm i wangeditor
            2、引入 import E from "wangeditor"
            3、使用
              this.editor = new E("#main")
              this.editor.create()

              常用配置：
              1、清空内容
                editor.txt.clear()  清空编辑器内容
              2、设置内容
                editor.txt.html('') 获取html
              3、配置菜单
                1、onchange回调函数
      
           -->
          <el-form-item label="新闻内容" prop="newsContent" style="z-index: 100;" required>
            <WangEditor ref="myEditor" @sendEditor="sendEditor"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getSubmitTime();submitForm('ruleForm')">确定发布</el-button>
            <el-button @click="clearForm()">重置</el-button>
          </el-form-item>
        </el-form>
        </div>
    </div>
</template>

<script>
import badwordsArr from '../../../utils/badwords'
import axios from 'axios'
export default {
    name:'SysPubnews',
    data() {
        return {
            date1:'',
            date2:'',
            newsForm:{
                newsTitle:'',
                newsContent:'',
                newsImg:'',
                newsTime:'',
            },
            tableData: [],
            badwords:'',
            adminName:'',
            rules: {//element组件校验规则
              newsTitle: [
                { required: true, message: '请输入新闻标题', trigger: 'blur' },
                { min: 4, max: 255, message: '长度在 4 到 255 个字符', trigger: 'blur' }
              ],
            },
        }
    },
    mounted() {
      this.getAlladminlist()
      // this.adminName = this.tableData[0].adminName
      // console.log(this.adminName)
    },
    methods: {
      // 拍卖地址：华北水利水电大学龙子湖校区；拍卖时间：即时起，预期1天，先到先得；商品质量良好，预估价45左右，起拍价低，欢迎广大用户前来竞拍
        // 清空表单
        clearForm(){
          // 清空表单
          this.$refs.ruleForm.resetFields()
          // 单独清空富文本编辑器
          this.$refs.myEditor.editor.txt.clear()
          this.date1 = ''
          this.date2 = ''
          this.newsForm.newsImg = ''
        },
        // 发布新闻资讯
        submitForm(formName){
          // console.log(this.$refs[formName])
          this.$refs[formName].validate((valid)=>{
            if(valid){
              this.badwords = badwordsArr
              // console.log("坏词有：",this.badwords)
              var re =''
              for(var i=0;i<this.badwords.length;i++){
                  if(i==this.badwords.length-1)
                      re+=this.badwords[i];
                  else
                      re+=this.badwords[i]+"|";
              }
              // 生成正则表达式，gi全局检验
              var pat = new RegExp(re,"gi");
              this.newsForm.newsContent = this.newsForm.newsContent.replace(pat,"***")
              axios.get("http://localhost:8080/api/addNewsList/addNews",{
                params:{
                  adminName:this.adminName,
                  newsTitle:this.newsForm.newsTitle,
                  newsContent:this.newsForm.newsContent,
                  newsImg:this.newsForm.newsImg,
                  newsTime:this.newsForm.newsTime,
                }
              }).then(
                res=>{
                  this.$message({
                    message:'新闻发布成功',
                    type:'success'
                  })
                  // // 清空表单
                  // this.$refs.ruleForm.resetFields()
                  // // 单独清空富文本编辑器
                  // this.$refs.myEditor.editor.txt.clear()
                  // this.date1 = ''
                  // this.date2 = ''
                  // this.newsForm.newsImg = ''
                  this.clearForm()
                },
                error=>{
                  console.log("b",error.message)
                }
              )
              console.log("获取输入信息",this.newsForm)
            }else{
              console.log("提交错误")
              return false
            }
          })
        },
        getAlladminlist(){
            axios.get("http://localhost:8080/api/getAllAdmin/getAllAdminlist",{
              params:{
                id:1
              }
            }).then(
              res=>{
                this.tableData = res.data
                // console.log("999",res)
                // console.log("666",this.tableData)
                this.adminName = this.tableData[0].adminName
                // console.log(this.adminName)
              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
        // 获取时间
        getSubmitTime(){
          var data = this.formatDateTime(this.date1)
          this.newsForm.newsTime = data + ' ' + this.date2
          // this.newsForm.newsTime = String(this.date1).slice(0,15) + String(this.date2).slice(15,24)
          // console.log(this.goodsForm.subTime)
        },
        // 时间转换
        formatDateTime (date) {
          var date = new Date(date)
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          // return y + '-' + m + '-' + d+' '+h+':'+minute;
          return y + '-' + m + '-' + d
        },
        // 接收wangeditor文本数据
        sendEditor(val){
          this.newsForm.newsContent = val
          // console.log("222",this.goodsForm.goodsContent)
        },
        // 获取用户传的图片地址
        getImg(){
          console.log(this.$store.state.user.usersubgoods)
          for(var i=0;i<this.$store.state.user.usersubgoods.length;i++){
            if(this.newsForm.newsTitle.indexOf( this.$store.state.user.usersubgoods[i].goodsName) != -1){
              this.newsForm.newsImg = this.$store.state.user.usersubgoods[i].goodsImg
            }
          }
          if(this.newsForm.newsImg==''){
            alert("请给你发布的竞拍商品新闻标题认真命名(注意包含竞拍名)")
          }
        }
    },
}
</script>

<style lang='less' scoped>
.syspubnews {
  margin: 20px;
  width: 100%;

    .title{
      width: 95%;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      margin-bottom: 20px;
    }
    .myfrom{
        width: 95%;
    }
}
.line{
    text-align: center;
}
</style>